<template>
    <div class="register">
        <h2>SHUN-Z</h2>
        <h3><router-link to="/login">登录</router-link></h3>
        <router-link to="/" class="back">主页</router-link>
        <div class="form">
            <div class="nickName">
                <p>昵称：</p>
                <input v-model="user.nickName" type="text" placeholder="请输入昵称">
            </div>
            <div class="account">
                <p>账号：</p>
                <input v-model="user.account" type="text" placeholder="请输入账号">
            </div>
            <div class="password">
                <p>密码：</p>
                <input v-model="user.password" type="text" placeholder="请输入密码">
            </div>
            <div class="confirmed">
                <p>确认密码：</p>
                <input v-model="user.confirmed" type="text" placeholder="确认密码">
            </div>
            <div class="email">
                <p>邮箱：</p>
                <input v-model="user.email" type="text" placeholder="邮箱账号">
            </div>
            <div class="vcode">
                <p>验证码：</p>
                <input v-model="user.vcode" type="text" placeholder="输入验证码">
                <button v-if="isSent" @click="sentVcode">发送验证码</button>
                <p v-else v-show="isloding">{{ timer }}秒后重试</p>
                <p v-show="!isloding && !isSent">加载中....</p>
            </div>
            <button class="btn" @click="register">注册</button>
        </div>
    </div>
</template>

<style lang="less" scoped>
@import url(../assets/appColor.less);

.register {
    position: absolute;
    width: 100%;
    height: 100vh;
    padding: 15px;
    background: linear-gradient(to bottom right, #f7e0aa, #cb86d9);

    .back {
        position: absolute;
        top: 10px;
        left: 10px;
        font-size: 20px;
        font-weight: bold;
    }

    h2 {
        margin-top: 25%;
        text-align: center;
        margin-left: 50%;
        transform: translateX(-50%);
        margin-bottom: 10%;
        font-size: 25px;
        font-family: Fantasy;
    }

    h3 {
        position: absolute;
        top: 10px;
        right: 10px;

        a {
            font-size: 20px;
        }
    }

    .form {
        box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
        border-radius: 15px;
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;

        >div {
            height: 35px;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            width: 95%;
            align-items: center;

            input {
                border-bottom: 1px solid #757575;
                width: 70%;
                padding: 5px;
            }
        }

        .vcode {
            input {
                width: 40%;
            }
        }

        .other {
            width: 90%;

            p {
                color: #757575;
                font-size: 12px;
            }
        }

        .btn {
            font-size: 18px;
            font-weight: bold;
            color: @TColor1;
            background-color: @color2;
            padding: 10px 20px;
            width: 90%;
            border-radius: 15px;
        }
    }
}
</style>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
// 导入请求方法
import api from '../api/request'
const $router = useRouter();

// 倒计时
let timer = ref(59);
let isSent = ref(true);
let isloding = ref(true);//加载中

// 表单数据
let user = reactive({
    nickName: '',
    account: '',
    password: '',
    confirmed: '',
    email: '',
    vcode: ''
})

// 发送验证码
const sentVcode = () => {
    // 发送请求
    isSent.value = false;
    isloding.value = false;
    api.emailSend({ email: user.email })
        .then(res => {
            if (res == undefined) {
                isSent.value = true;
                isloding.value = true;
                showToast({
                    message: '发送失败，该邮箱不存在',
                });
            }
            else if (res.code == 200) {
                isloding.value = true;
                showToast({
                    message: res.msg,
                });
                // 倒计时
                let count = setInterval(() => {
                    timer.value--;
                    if (timer.value === 0) {
                        clearInterval(count);
                        isSent.value = true;
                        timer.value = 59;
                    }
                }, 1000);
            }
            else {
                isSent.value = true;
                isloding.value = true;
                showToast({
                    message: res.msg,
                });
            }

        })
}

// 注册
const register = () => {
    // 判断输入框是否为空
    if (user.nickName === '' || user.account === '' || user.password === '' || user.confirmed === '' || user.email === '' || user.vcode === '') {
        showToast({
            message: '请填写完整信息',
        });
        return;
    }
    else {
        // 判断两次密码是否一致
        if (user.password !== user.confirmed) {
            showToast({
                message: '两次密码不一致',
            });
            return;
        }
        else {
            // 校验验证码
            let email = user.email;
            let vcode = user.vcode;
            api.verify({ email, vcode })
            .then(res=>{
                if(res.code==200){
                    // 注册
                    let {nickName,account,password,email}=user;
                    api.register({nickName,account,password,email})
                    .then(res=>{
                        if(res.code==200){
                            showToast({
                                message: '注册成功',
                            });
                            $router.push('/login');
                        }
                        else{
                            showToast({
                                message: res.msg,
                            });
                        }
                    })
                }
                else{
                    showToast({
                        message: res.msg,
                    });
                }
            })


        }
    }
}

</script>